<template>
    <div class="layout-padding-auto layout-padding-view">
        <!--查询表单-->
        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

            <el-form-item :label="$t('storageInfo.materialCode')" prop="materialCode">
                <el-input v-model="state.queryForm.materialCode"  :placeholder="$t('storageInfo.enterMaterialCode')" />
            </el-form-item>

            <el-form-item :label="$t('storageInfo.materialName')" prop="materialName">
                <el-input v-model="state.queryForm.materialName"  :placeholder="$t('storageInfo.enterMaterialName')" />
            </el-form-item>

            <el-form-item :label="$t('storageInfo.materialSpecification')" prop="spec">
                <el-input v-model="state.queryForm.spec" :placeholder="$t('storageInfo.enterMaterialSpecification')" />
            </el-form-item>
            <el-form-item :label="$t('storageInfo.warehouse')" prop="warehouseCode">
                <div style="display: inline-block; margin-left: 20px">
                    <el-select v-model="state.queryForm.warehouseCode" multiple collapse-tags :placeholder="$t('storageInfo.selectWarehouse')"
                        style="width: 150px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </el-form-item>
            <el-form-item :label="$t('storageInfo.process')" prop="processCode">
                <div style="display: inline-block; margin-left: 20px">
                    <el-select v-model="state.queryForm.processCode" multiple collapse-tags :placeholder="$t('storageInfo.selectProcess')"
                        style="width: 150px">
                        <el-option v-for="item in optionsP" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" type="primary"  @click="getDataList">{{$t('storageInfo.query')}}</el-button>
                <el-button icon="refresh"  @click="resetQuery">{{$t('storageInfo.reset')}}</el-button>
                <el-button plain class="ml10" icon="Download" type="success" @click="exportxlsx">
							{{ $t('common.exportBtn') }}
						</el-button>
            </el-form-item>
        </el-form>
        <!--查询结果的列表-->
        <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border :summary-method="getSummaries" show-summary
            style="width: 100%;height: 100%" :cell-style="tableStyle.cellStyle" stripe
            :header-cell-style="tableStyle.headerCellStyle">
            <el-table-column type="index" label="#" width="60" />
            <el-table-column prop="warehouseCode" :label="$t('storageInfo.warehouseCode')" width="120" />
            <el-table-column prop="warehouseName" :label="$t('storageInfo.warehouseName')" width="120" />
            <el-table-column prop="materialCode" :label="$t('storageInfo.materialCode')" width="160" />
            <el-table-column prop="materialName" :label="$t('storageInfo.materialName')"  />
            <el-table-column prop="inventoryCategory" :label="$t('storageInfo.inventoryCategory')" width="150" />
            <el-table-column prop="spec" :label="$t('storageInfo.materialSpecification')"  />
            <el-table-column prop="unit" :label="$t('storageInfo.unit')" width="80" />
            <el-table-column prop="maskSpec" :label="$t('storageInfo.facialMaskSpec')"  />
            <el-table-column prop="manualNumber" :label="$t('storageInfo.manualNumber')" width="100" />
            <el-table-column prop="processCode" :label="$t('storageInfo.processCode')" width="90" />
            <el-table-column prop="processName" :label="$t('storageInfo.processName')" width="90" />
            <el-table-column prop="sumQty" :label="$t('storageInfo.totalInventory')" width="100" >
                <template #default="scope">
                <!--根据不同的状态选择不同的颜色的tag-->
                <el-tag size="large" :type="'success'">
                  {{ scope.row.sumQty }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="barcodeQty" :label="$t('storageInfo.barcodeCount')" width="100" >
                <template #default="scope">
                <!--根据不同的状态选择不同的颜色的tag-->
                <el-tag size="large" :type="''">
                  {{ scope.row.barcodeQty }}
                </el-tag>
              </template>
            </el-table-column>
       </el-table>
        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { BasicTableProps, useTable } from "/@/hooks/table";
import { useMessage, useMessageBox } from "/@/hooks/message";
import { getInventorySummary, getProcessList, getWarehousList } from "/@/api/platform/report/storageInfo"
import {useI18n} from 'vue-i18n';
const {t} = useI18n();
// 搜索变量
const queryRef = ref()
const selectValue = ref([])
const options = ref([])
const optionsP = ref([])

onMounted(() => {
    getWarehousList().then(res => {
        options.value = res.data
    })
})
onMounted(() => {
    getProcessList().then(res => {
        optionsP.value = res.data
    })
})

const getSummaries = (param) => {
  const { columns, data } = param
  const sums: (string | VNode)[] = []
  columns.forEach((column, index) => {

    if (index === 0) {
      sums[index] = h('div', { style: { textDecoration: 'underline',textAlign:'center' } }, [
        'Sum',
      ])
      return
    }
    //只显示这两个字段的和
    if (column.property != 'sumQty' && column.property != 'barcodeQty') return;
	if(index==3)return;
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
	  sums[index] = h('div', { style: {textAlign:'center' } }, [
        `${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
            return Number((prev + curr).toFixed(4))
          } else {
            return Number(prev.toFixed(4))
          }
      }, 0)}`,
      ])
    }
  })

  return sums
}

const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: getInventorySummary
})

const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)

// 清空搜索条件
const resetQuery = () => {
    // 清空搜索条件
    queryRef.value?.resetFields()
    // 清空多选
    getDataList(false)
}
const exportxlsx = () => {
	downBlobFile('/report/storageInfo/ExportInventorySummary', {
        "materialCode": state.queryForm.materialCode, 
        "materialName": state.queryForm.materialName, 
        "spec": state.queryForm.materialSpec,
        "warehouseCode":state.queryForm.warehouseCode,
        "processCode":state.queryForm.processCode
    }, 'storageInfoSummary' + getNowFormatDate() + '.xlsx');
}
function getNowFormatDate() {
    var date = new Date();
    // 获取年份
    const year = date.getFullYear();

    // 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
    const month = String(date.getMonth() + 1).padStart(2, '0');

    // 获取日期
    const day = String(date.getDate()).padStart(2, '0');

    // 拼接成 年月日时分秒 格式的字符串
    var currentdate = year + month + day
        + date.getHours() + date.getMinutes()
        + date.getSeconds();
    return currentdate;
}
</script>